<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { storeToRefs } from "pinia";
import {useDictionaryStore} from '../../store'
import { ElForm,  ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { ApiStaff } from '../../api';

const { staffCategoryList} = storeToRefs(useDictionaryStore());
const show=ref<boolean>(false)
const model=ref<API.Staff.Update>({
    stf_id:0,
    stf_name:'',
   stf_category:0,
   stf_remark:''
})
const cancel=async()=>{
    await ElMessageBox.confirm('取消数据会丢失哦？', '提示', {type: 'warning'})
    show.value=false
}
const formRef=ref<FormInstance|null>(null)
const emits=defineEmits<{(name:'save',model:API.Staff.Update):void}>()
const save=async()=>{
    await formRef.value?.validate()
    await ApiStaff.update(model.value)
    emits('save',model.value)
    show.value=false
    ElMessage.success('添加成功')
}
const roules:FormRules={
    stf_name:[{required:true,message:'请输入员工姓名',trigger:'blur'},
        {min:2,max:10,message:'长度在2到10个字符',trigger:'blur'}
    ],
    

}
defineExpose({
    begin:()=>{
        formRef.value?.resetFields()
         nextTick(()=> show.value=true)
    },
    end:()=>{
        show.value=false
    },
})

</script>

<template>
<el-dialog title="员工修改" width="500px" v-model="show">
    <el-form ref="formRef" :rules="roules" :model="model" label-width="100">
        <el-form-item label="员工姓名：" label-width="100" prop="stf_name">
            <el-input v-model="model.stf_name"></el-input>
        </el-form-item>
        <el-form-item label="岗位：" label-width="100" prop="stf_category">
            <el-select v-model="model.stf_category">
                <el-option :label="'--请选择--'" :value="0" ></el-option>
                <el-option v-for="item in staffCategoryList" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注：" label-width="100">
            <el-input v-model="model.stf_remark" ></el-input>
        </el-form-item>
        <el-form-item >
            <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
</template>



<style scoped>

</style>
